<script setup>
import HeaderComponent from '@/components/HeaderComponent.vue'
import FooterComponent from '@/components/FooterComponent.vue'
import UserCatgoryInfoSiderComponent from '@/components/UserCatgoryInfoSiderComponent.vue'
import { FieldTimeOutlined, TagOutlined, EditOutlined } from '@ant-design/icons-vue'

import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { onMounted, ref } from 'vue'
const text = ref('# Hello Editor')

// 读取MD文章内容
onMounted(() => {
	fetch('/public/Flink开发环境搭建.md')
		.then(resp => resp.text())
		.then(resp => {
			text.value = resp
		})
})
</script>

<template>
	<HeaderComponent />
	<div class="post-box">
		<a-layout style="align-items: flex-start">
			<a-layout-content class="post-details">
				<!-- 标题 -->
				<h1>再战个人博客 - 基于Vue+Express+ Ant Design Vue前后端分离</h1>
				<a-space class="user-info" size="large">
					<span>
						<EditOutlined />
						崔大洪
					</span>
					<span>
						<FieldTimeOutlined />
						2022-11-12
					</span>
					<span>
						<TagOutlined />
						MySQL性能分析
					</span>
				</a-space>
				<!-- 预览内容 -->
				<MdPreview id="previewMD" editorId="previewOnly" :modelValue="text" />
			</a-layout-content>
			<a-layout-sider theme="light" width="350px"><UserCatgoryInfoSiderComponent /></a-layout-sider>
		</a-layout>
	</div>

	<FooterComponent />
</template>

<style scoped>
.post-box {
	width: 85%;
	margin: 0 auto;
	margin-top: 20px;
}
.post-details {
	margin-right: 20px;
}
.post-details > h1 {
	font-size: 25px;
}
#previewMD {
	margin-top: 20px;
}
</style>
